<template>
  <FormSection title="工作经历">
    <FormItem
      v-for="(work, index) in resumeData.workExperience"
      :key="index"
      @remove="removeWork(index)"
    >
      <FormGrid>
        <FormField
          label="公司名称"
          type="text"
          placeholder="请输入公司名称"
          v-model="work.company"
        />
        <FormField
          label="职位"
          type="text"
          placeholder="请输入职位"
          v-model="work.position"
        />
        <FormField
          label="入职时间"
          type="date"
          v-model="work.startDate"
        />
        <FormField
          label="离职时间"
          type="date"
          v-model="work.endDate"
        />
      </FormGrid>
      <div class="mt-4">
        <FormField
          label="工作内容"
          type="textarea"
          placeholder="请描述工作内容和成就"
          :rows="4"
          v-model="work.description"
        />
      </div>
    </FormItem>
    <AddButton text="添加工作经历" @click="$emit('add-work')" />
  </FormSection>
</template>

<script setup lang="ts">
import FormSection from './FormSection.vue'
import FormGrid from './FormGrid.vue'
import FormField from './FormField.vue'
import FormItem from './FormItem.vue'
import AddButton from './AddButton.vue'

interface WorkExperience {
  company: string
  position: string
  startDate: string
  endDate: string
  description: string
}

interface ResumeData {
  workExperience: WorkExperience[]
}

interface Props {
  resumeData: ResumeData
}

defineProps<Props>()

const emit = defineEmits<{
  'add-work': []
  'remove-work': [index: number]
}>()

const removeWork = (index: number) => {
  emit('remove-work', index)
}
</script>
